<template>
  <bui-page-layout ref="pageLayout" :is-z-paging="true">
    <view class="cardinfo-page">
      <u--form labelWidth="260rpx" labelPosition="top" :model="cardInfo" :rules="rules" ref="formInfo">
        <!-- <u-form-item required label="原密码" prop="oldpassword" v-if="type === 'edit'">
          <view class="input">
            <u--input v-model="cardInfo.oldpassword" type="password" placeholder="请输入原密码" border="none"></u--input>
          </view>
        </u-form-item> -->
        <u-form-item required label="新密码" prop="password">
          <view class="input">
            <u--input v-model="cardInfo.password" type="password" placeholder="请输入新密码" border="none"></u--input>
          </view>
        </u-form-item>
        <u-form-item required label="确认密码" prop="rpassword">
          <view class="input">
            <u--input v-model="cardInfo.rpassword" type="password" placeholder="请输入再次输入新密码" border="none"></u--input>
          </view>
        </u-form-item>
      </u--form>
      <b-button :loading="buttonLoading" @change="submitInfo" style="margin-top: 30rpx;">
        <text class="button_t">提交</text>
      </b-button>
    </view>
  </bui-page-layout>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import { globalStore } from "@/store";
const gStore = globalStore();
var buttonLoading = ref(false);
var rules = reactive({
  password: {
    type: "string",
    required: true,
    message: "原密码不能为空",
    trigger: ["blur", "change"],
  },
  rpassword: {
    type: "string",
    required: true,
    message: "确认密码不能为空",
    trigger: ["blur", "change"],
  },
});
var type = ref("");
onLoad((options) => {
  type.value = options.type || "add";
});
onReady(() => {
  uni.setNavigationBarTitle({
    title: (type.value === "add" ? "提现" : "修改") + "密码",
  });
});
const formInfo = ref(null);
var cardInfo = ref({
  password: "",
  rpassword: "",
});
const submitInfo = () => {
  formInfo.value
    .validate()
    .then((res) => {
      setPassWord();
    })
    .catch((errors) => {
      buttonLoading.value = false;
    });
};
const setPassWord = () => {
  buttonLoading.value = true;
  if (cardInfo.value.password !== cardInfo.value.rpassword) {
    uni.$u.toast("两次输入密码不一样");
    buttonLoading.value = false;
    return;
  }
  uni.$request
    .service({
      url: "/m/pass/pay",
      method: "POST",
      data: {
        password: cardInfo.value.password,
      },
    })
    .then((res) => {
      buttonLoading.value = false;
      uni.$u.toast("提交成功");
      gStore.getUserInfo();
      uni.navigateBack({
        delta: 1,
      });
    })
    .catch((err) => {
      buttonLoading.value = false;
    });
};
</script>
<style lang="scss">
page {
  background-color: #f6f6f8;
}
.cardinfo-fail {
  background-color: #ffe4e3;
  display: flex;
  align-items: center;
  padding: 20rpx 40rpx;
  .fail {
    width: 44rpx;
    height: 44rpx;
    margin-right: 16rpx;
  }
  .text {
    font-size: 28rpx;
    color: #232f3f;
  }
}
.cardinfo-page {
  padding: 0 40rpx;
  .input {
    flex: 1;
    padding: 20rpx 20rpx;
    background-color: #fff;
    border: 2rpx solid #d3dce6;
    border-radius: 16rpx;
  }
}
.submit {
  background-color: #fe9900;
  display: flex;
  justify-content: center;
  border-radius: 16rpx;
  padding: 22rpx 0;
  margin-top: 30rpx;
  .t {
    font-size: 32rpx;
    color: #fff;
  }
}
</style>
